<template>
	<Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
		<Row :gutter="24" type="flex">
			<Col v-bind="grid">
				<FormItem label="关键字：" prop="keyword" label-for="keyword">
					<Input v-model="data.keyword" placeholder="请输入姓名/手机号" element-id="keyword" />
				</FormItem>
			</Col>
			<Col v-bind="grid" class="ivu-text-left">
				<FormItem>
					<Button type="primary" @click="handleSubmit">查询</Button>
					<Button class="ivu-ml-8" @click="handleReset">重置</Button>
				</FormItem>
			</Col>
		</Row>
	</Form>
</template>
<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			grid: {
				xl: 8,
				lg: 8,
				md: 12,
				sm: 24,
				xs: 24
			},
			collapse: false,
			data: {
				roomName: '',
				phoneNo: ''
			},
			rules: {},
		}
	},
	computed: {
		...mapState('admin/layout', [
			'isMobile'
		]),
		labelWidth() {
			return this.isMobile ? undefined : 100;
		},
		labelPosition() {
			return this.isMobile ? 'top' : 'right';
		}
	},
	methods: {
		handleSubmit() {
			this.$emit('on-submit', this.data);
		},
		handleReset() {
			this.$refs.form.resetFields();
			this.$emit('on-reset');
		}
	}
}
</script>
